/*
* @Description:主机管理-新增
* @Author: lil
* @Date: 2021/11/19
**/
<template>
  <div>
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" ref="form" label-width="82px">
      <el-form-item label="别名:" prop="mark">
        <el-input v-model="form.mark" placeholder="请输入服务器别名，如h1" maxlength="6"></el-input>
      </el-form-item>
      <el-form-item label="服务器IP:" prop="ip">
        <el-input v-model="form.ip" placeholder="请输入服务器地址" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input value="root" disabled maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input :type="invisible" v-model="form.password" placeholder="请输入密码" maxlength="30">
          <i slot="suffix" :class="iconName" @click="showPswd"></i>
        </el-input>
      </el-form-item>
      <el-form-item label-width="0" class="btns">
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button type="info" @click="resetForm('form')">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    addHost
  } from '@/api/blockchain/deployhost'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
        let valdata = value.split(',')
        let data = valdata[valdata.length - 1]
        let isCorrect = true
        let isRepeat = false
        if (valdata.length) {
          for (let i = 0; i < valdata.length; i++) {
            if (regexp.test(valdata[i]) === false) {
              isCorrect = false
            }
          }
          for (let i = 0; i < valdata.length - 1; i++) {
            if (valdata[i] === data) {
              isRepeat = true
            }
          }
        }
        if (value === '') {
          return callback(new Error('iP地址不能为空！'))
        } else if (!isCorrect) {
          callback(new Error('请输入正确的ip地址！'))
        } else if (isRepeat) {
          callback(new Error('输入的ip地址不能重复！'))
        } else {
          callback()
        }
      }
      return {
        form: {
          //服务器别名
          mark: '',
          //服务器地址
          ip: '',
          // 密码
          password: '',
        },
        rules: {
          mark: [{
            required: true,
            message: '服务器别名不能为空！',
            trigger: 'change'
          }],
          ip: [{
            required: true,
            validator: validatePass,
            trigger: 'change'
          }],
          password: [{
            required: true,
            message: '密码不能为空！',
            trigger: 'change'
          }]
        },
        invisible: 'text',
        iconName: 'iconfont zfsoft-huyanmoshi'
      };
    },

    methods: {
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('setLoading', true);
            var _this = this;
            _this.form.name = 'root';
            addHost(_this.form).then(() => {
                _this.$emit('setLoading', false);
                _this.$message({
                  type: 'success',
                  message: '添加主机成功'
                });
                _this.$emit('closeadd');
              })
              .catch(function (error) {
                _this.$emit('setLoading', false);
              })
          }
        })

      },
      showPswd() {
        if (this.invisible == 'text') {
          this.invisible = 'password';
          this.iconName = 'iconfont zfsoft-yincang';
        } else {
          this.invisible = 'text';
          this.iconName = 'iconfont zfsoft-huyanmoshi';
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  };

</script>
<style lang="scss" scoped>
  .el-form {
    padding: 40px 40px 10px;

    &>>>.el-form-item__label {
      &::before {
        content: '*';
        display: inline-block;
        color: #f12945;
      }
    }

    .btns {
      text-align: center;
      margin-top: 70px;

      .el-button:nth-of-type(1) {
        margin-right: 40px;
      }
    }
  }

</style>
